<template>
    <section>
        <div class="head-notice" v-if="noticeForm && noticeForm.location == 'top' && isShowNotice">
            <svg-icon name="icon_notice" style="width: 20px;height: 20px;color: #0077FF;margin-right: 8px;" />
            {{ noticeForm.content }}

            <svg-icon @click="isShowNotice = false" name="icon_close"
                style="width: 12px;height: 12px;color: #333333;margin-left: auto;" />
        </div>

        <XsyModal v-model="open" :text="noticeForm.content"></XsyModal>

        <DetailsHeader title="机主首页" class="mb-24" :showBack="false">
            <a-button type="link" @click="ownerNoticeVisible = true">机主须知</a-button>
        </DetailsHeader>

        <a-row :gutter="16" style="margin-bottom: 15px;">
            <a-col :span="16">
                <div class="card" style="margin-bottom: 0;">
                    <div class="card-header">
                        <a-button class="card-opt" type="link" @click="router.push('/owner/machine')">查看</a-button>
                    </div>
                    <div class="card-content">
                        <div class="my-commission-item">
                            <div class="item-label">
                                我的机器
                            </div>
                            <div class="item-txt">{{ personalInfo?.machine?.total }}</div>
                        </div>
                        <div class="line"></div>
                        <div class="my-commission-item">
                            <div class="item-label">
                                在线机器
                            </div>
                            <div class="item-txt">{{ personalInfo?.machine?.online }}</div>
                        </div>
                        <div class="line"></div>
                        <div class="my-commission-item">
                            <div class="item-label">
                                上架机器
                            </div>
                            <div class="item-txt">{{ personalInfo?.machine?.onSale }}</div>
                        </div>
                        <div class="line"></div>
                        <div class="my-commission-item">
                            <div class="item-label">
                                即将到期机器
                            </div>
                            <div class="item-txt">{{ personalInfo?.machine?.expiring }}</div>
                        </div>
                        <div class="line"></div>
                        <div class="my-commission-item">
                            <div class="item-label">
                                出租/上架显卡数
                            </div>
                            <div class="item-txt">{{ personalInfo?.machine?.inUseGpuNum }} / {{
                                personalInfo?.machine?.onSaleGpuNum }}</div>
                        </div>
                    </div>
                </div>
            </a-col>
            <a-col :span="8">
                <div class="card" style="margin-bottom: 0;">

                    <div class="user-card-content">
                        <div class="mb-8 user-info">
                            <div class="user-img">
                                <img :src="userInfo?.userItem?.avatar || defaultAvatar" alt="">
                            </div>
                            <div class="info">
                                <div class="mb-8"><span>{{ userInfo?.userItem?.nickname }}</span><span class="point">{{
                                    personalInfo?.provider?.score || 0
                                }}分</span>
                                </div>
                                <!-- <svg-icon name="icon_ordinary" class="member-icon" /> -->
                                <img class="member-grade" src="@/assets/img/owner/member-ordinary.png" alt=""
                                    v-if="personalInfo?.provider?.grade == 1">
                                <img class="member-grade" src="@/assets/img/owner/member-gold.png" alt=""
                                    v-if="personalInfo?.provider?.grade == 2">
                                <img class="member-grade" src="@/assets/img/owner/menber-diamond.png" alt=""
                                    v-if="personalInfo?.provider?.grade == 3">
                            </div>

                            <a-button class="card-opt" style="margin-left: auto;" type="link"
                                @click="goPoints">积分明细</a-button>
                        </div>

                        <div class="card-con-list">
                            <div class="item-title mr-8">平台服务费比例</div>
                            <div class="item-txt">{{ personalInfo?.provider?.commissionRate * 100 || 0 }}%</div>
                        </div>
                    </div>
                </div>
            </a-col>
        </a-row>

        <div class="card">
            <div class="card-header">
                <span class="card-title">可提现收入</span>
                <div class="card-opt">
                    <span class="tips">本月还可以申请{{ personalInfo?.account?.withdrawTime }}次</span>
                    <a-button type="primary" class="card-opt" @click="handleAdd"
                        :disabled="!(account?.providerAccount?.WidthdrawBalance > 0) || !(personalInfo?.account?.withdrawTime > 0)">申请提现</a-button>
                </div>
            </div>

            <div class="card-content flex">
                <span class="totle-amont">￥{{ personalInfo?.account?.WidthdrawBalance }}</span>
                <span>
                    <div class="fz-14 col-223354 mb-24">=¥{{ personalInfo?.account?.lastMonthBalance }}<span
                            class="minus-sign">-</span></div>
                    <div class="fz-14 col-8A93A7">截止上月收入 </div>
                </span>
                <span>
                    <div class="fz-14 col-223354 mb-24">¥{{ personalInfo?.account?.lastMonthDeposit }}<span
                            class="minus-sign">-</span></div>
                    <div class="fz-14 col-8A93A7">已付押金</div>
                </span>
                <span>
                    <div class="fz-14 col-223354 mb-24">¥{{ personalInfo?.account?.lastMonthTotalWithdraw }}<span
                            class="minus-sign">-</span></div>
                    <div class="fz-14 col-8A93A7">累计上月底提佣</div>
                </span>
                <span>
                    <div class="fz-14 col-223354 mb-24">¥{{ personalInfo?.account?.lastMonthTotalCompensation }}</div>
                    <div class="fz-14 col-8A93A7">累计上月底已赔付金额</div>
                </span>
            </div>
        </div>

        <a-row :gutter="40" style="margin-bottom: 15px;">
            <a-col :span="12">
                <div class="card" style="margin-bottom: 0;">
                    <MachineSaleEchart />
                </div>
            </a-col>

            <a-col :span="12">
                <div class="card" style="margin-bottom: 0;">
                    <MachineStableEchart />
                </div>
            </a-col>
        </a-row>

        <div class="card">
            <IncomeEchart :personalInfo="personalInfo" />
        </div>

        <OwnerNotice v-model="ownerNoticeVisible" v-if="ownerNoticeVisible"></OwnerNotice>


    </section>
</template>

<script setup name="OwnerSpace">
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ownerSpaceApi } from '@/api/modules/api.owner'
import IncomeEchart from './components/IncomeEchart.vue'
import MachineSaleEchart from './components/MachineSaleEchart.vue'
import MachineStableEchart from './components/MachineStableEchart.vue'
import { getNoticeListApi } from "@/api/modules/api.messages";
import { useNotice } from "@/hooks/sys/useNotice";
import userInfoStore from '@/stores/userInfo.js'
import { storeToRefs } from 'pinia'
import XsyModal from '@/components/common/XsyModal.vue';
import OwnerNotice from '@/components/common/OwnerNotice.vue'
import defaultAvatar from '@/assets/img/avatar.png'

const useUserInfoStore = userInfoStore()
const { userInfo: userInfo, accountInfo: account } = storeToRefs(useUserInfoStore);

const {
    getNoticeList
} = useNotice(getNoticeListApi, showCb)

getNoticeList('ownerCenter')
const isShowNotice = ref(true)
const ownerNoticeVisible = ref(false)
// 通知消息
const noticeForm = ref({})
const open = ref(false)
function showCb(notice) {
    noticeForm.value = notice
    if (notice.location == 'pop') {
        open.value = true
    }
}

const router = useRouter()

// 获取个人用户信息
const personalInfo = ref({})
const getUserInfo = () => {
    ownerSpaceApi().then(res => {
        personalInfo.value = res.data
    })
};

getUserInfo()

// 查看积分
const goPoints = () => {
    router.push('/owner/points')
}

const handleAdd = () => {
    router.push({ path: '/owner/apply-withdrawal', query: { commission: account?.value?.providerAccount?.WidthdrawBalance } })
}

</script>

<style scoped lang="scss">
.head-notice {
    display: flex;
    align-items: center;
    color: #07F;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    padding: 10px 24px 10px 10px;
    margin-bottom: 16px;
    background: #DCE8F6;
    border: 1px solid #07F;
    border-radius: 4px;
}

.card {
    background: #fff;
    padding: 24px;
    border-radius: 6px;
    height: 100%;
    margin-bottom: 15px;

    .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        .card-title {
            font-weight: 550;
            color: #223354;
            margin-right: 20px;
        }

        .card-opt {
            margin-left: auto;

            .tips {
                color: #8A93A7;
                font-family: PingFang SC;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-right: 16px;
            }
        }
    }

    .card-content {
        display: flex;

        .totle-amont {
            color: #FAAD14;
            font-family: PingFang SC;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-right: 16px;
        }

        .minus-sign {
            margin: 0 50px;
        }

        .my-commission-item {
            flex: 1;
            padding-left: 24px;
        }

        .line {
            height: auto;
            width: 1px;
            background: #ccc;
        }

        .item-txt {
            font-size: 14px;
            color: #8A93A7;
        }

    }

    .user-card-content {
        text-align: center;

        .user-info {
            display: flex;
            margin-bottom: 24px;

            .user-img {
                margin-right: 24px;

                img {
                    display: block;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                }
            }

            .point {
                color: #07F;
                text-align: right;
                font-family: PingFang SC;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-left: 8px;
            }

            .info {
                .member-grade {
                    display: inline-block;
                    width: 70px;
                    height: 20px;
                }
            }
        }

        .member-icon {
            width: 70px;
            height: 20px;
            margin-top: 5px;
        }
    }

    .card-con-list {
        margin-bottom: 16px;
        display: flex;
        align-items: center;

        .item-title {
            color: #8A93A7;
           
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .item-txt {
            color: #223354;
        
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }

}
</style>
